<template>
  <div>
    <h1>Counter</h1>
    <div>count: {{ count }} <button @click="addCount">+1</button></div>
  </div>
</template>

<script>
export default {
  name: 'Counter',

  // 对于子组件而言，如果我的 属性名 不想叫 value，事件名 不想叫 input，还能不能支持 v-model 呢？
  // ==> 可以，value 是 v-model 默认绑定的属性名，input 是 v-model 默认绑定的事件名，但是，也自己修改，怎么改呢？
  // ==> 有一个配置项叫 model，和 props、data、methods、生命周期钩子等等平级，model 配置项里面有两个子配置项（prop、event）
  // ==> model.prop 用来指定 v-model 绑定的属性名
  // ==> model.event 用来指定 v-model 绑定的事件名

  model: {
    prop: 'count',
    event: 'update:count',
  },

  props: {
    count: {
      type: Number,
      required: true,
      default: 0,
    },
  },
  methods: {
    addCount() {
      this.$emit('update:count', this.count + 1)
    },
  },
}
</script>
